<template>
  <div class="cockpit-container">
    <div class="cockpit-container_header">
      <header-info @click="handleClick"></header-info>
    </div>
    <div class="cockpit-container_row1">
      <div class="cockpit-container_row-chunk left">
        <div class="row">
          <zone-basic-data></zone-basic-data>
        </div>
        <div class="row">
          <agricultural-analysis></agricultural-analysis>
        </div>
      </div>
      <div class="cockpit-container_row-chunk middle">
        <emap ref="emapRef" style="margin-bottom: 10px"></emap>
      </div>
      <div class="cockpit-container_row-chunk right">
        <div class="row">
          <zone-analysis></zone-analysis>
        </div>
        <div class="row">
          <agricultural-source-analysis></agricultural-source-analysis>
        </div>
      </div>
    </div>
    <div class="cockpit-container_row2">
      <div class="cockpit-container_row-chunk left">
        <div class="row">
          <agricultural-line></agricultural-line>
        </div>
      </div>
      <div class="cockpit-container_row-chunk middle">
        <div class="row">
          <yangxing></yangxing>
        </div>
      </div>
      <div class="cockpit-container_row-chunk right">
        <div class="row">
          <agricultural-quick-check></agricultural-quick-check>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import headerInfo from "@components/headerInfo/index.vue";
import zoneBasicData from "@components/zoneBasicData/index.vue";
import emap from "@components/emap/index.vue";
import yangxing from "@components/yangxing/index.vue";
import agriculturalAnalysis from "@components/agriculturalAnalysis/index.vue";
import agriculturalLine from "@components/agriculturalLine/index.vue";
import zoneAnalysis from "@components/zoneAnalysis/index.vue";
import agriculturalSourceAnalysis from "@components/agriculturalSourceAnalysis/index.vue";
import agriculturalQuickCheck from "@components/agriculturalQuickCheck/index.vue";
const emapRef = ref<InstanceType<typeof emap> | null>(null);
const handleClick = () => {
  emapRef.value?.toggleIsShow();
};
</script>
<style lang="scss">
.cockpit-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .cockpit-container_header {
    height: 100px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .footer {
    height: 24px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .cockpit-container_row1 {
    width: 100%;
    display: flex;
    flex: 2 2 600px;
    min-height: 0px;
    .cockpit-container_row-chunk {
      display: flex;
      flex-direction: column;
      height: 100%;
      .row {
        height: 50%;
        margin-bottom: 12px;
      }
    }
    .left {
      width: calc(30% - 26px);
      margin-left: 26px;
    }
    .middle {
      width: calc(40% - 26px);
      margin-left: 13px;
      margin-right: 13px;
    }
    .right {
      width: calc(30% - 26px);
      margin-right: 26px;
    }
  }
  .cockpit-container_row2 {
    width: 100%;
    display: flex;
    flex: 1 1 300px;
    min-height: 0px;
    .left {
      height: 100%;
      width: calc(30% - 26px);
      margin-left: 26px;
    }
    .middle {
      height: 100%;
      width: calc(40% - 26px);
      margin-left: 13px;
      margin-right: 13px;
    }
    .right {
      height: 100%;
      width: calc(30% - 26px);
      margin-right: 26px;
    }
    .row {
      height: 100%;
    }
  }
}

.cockpit-container_row {
  display: flex;
}
</style>
